<template>
    <div class="echarts-root">
        <div id="echartsRef" style="width: 100%;" :style="{ height: cHeight }"></div>
        <div v-if="!noCenterTxt" class="total-div">
            <div class="total">{{ totalValue || 0 }}</div>
            <div class="tag">机修保</div>
        </div>
    </div>
</template>

<script setup>
//圆角、中心空白的饼图
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const props = defineProps({
    // 图表高度，带单位
    cHeight: {
        type: String,
        default: '230px',
    },
    noCenterTxt: {
        type: Boolean,
        default: false,
    },
    datas: {
        type: Array,
        default: () => {
            return []
        }
    }
});

watch(() => props.datas, value => initEcharts(value))

//图表对象
const echartsObj = ref(null);
const totalValue = ref(0)

//初始化图表
const initEcharts = (seriesDatas = []) => {
    if (echartsObj.value == null) {
        echartsObj.value = echarts.init(document.getElementById('echartsRef'));
    }
    if (!seriesDatas) {
        seriesDatas = []
    }
    totalValue.value = 0
    seriesDatas.map(item => {
        totalValue.value += parseFloat(item.value)
    })
    totalValue.value = parseFloat(totalValue.value).toFixed(0)

    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show: false
        },
        series: [{
            name: '',
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 13,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: true
            },
            data: seriesDatas
        }]
    };
    echartsObj.value.setOption(option);

    window.addEventListener('resize', () => {
        if (echartsObj.value) {
            echartsObj.value.resize()
        }
    })
}

onMounted(() => {
    initEcharts()
})

</script>

<style lang="scss" scoped>
.echarts-root {
    position: relative;
    width: 100%;
    height: 100%;

    .total-div {
        position: absolute;
        top: 36%;
        left: 50%;
        z-index: 11;
        width: 120px;
        height: 70px;
        margin-left: -60px;
        text-align: center;
        border-radius: 10px;

        .total {
            font-size: 30px;
            color: #000;
        }

        .tag {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
    }
}
</style>